
<template>
  <!-- 注意: ref的值必须和js中定义的同名ref响应式变量绑定,而且必须在组件挂载之后才能获取dom节点/组件实例 -->
  <!-- 注意: 给dom节点添加ref属性, 获取dom节点  -->
  <input ref="keyinput" value="vuejs3.x" type="text" placeholder="搜索框,输入关键词">
  <!-- 注意: 给组件添加ref属性, 获取组件实例( 子组件必须显示的通过defineExpose暴露 ) -->
  <Child ref="childref" />

</template>

<script setup>
import {ref,onMounted} from 'vue'
import Child from './components/Child.vue'

//这里申明的变量必须和dom节点绑定的ref值相同
var keyinput = ref();
//这里申明的变量必须和组件绑定的ref值相同
var childref = ref();

onMounted(()=>{
  console.log( keyinput.value );//获取dom节点
  console.log( childref.value );;//获取组件实例
  childref.value.add();//调用组件实例的方法( 该方法必须在子组件内部暴露 )
})

</script>